<!-- 编辑菜单 -->
<template>
  <el-dialog
    title="创建菜单"
    :lock-scroll="true"
    :append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="isShowDialog"
    width="30%"
    :before-close="hanleDialogClose"
    center
  >
    <el-form
      ref="menuFrom"
      status-icon
      :model="menuFrom"
      label-width="80px"
      size="mini"
      class="menu-edit-form"
      :rules="rules"
    >
      <el-form-item label="菜单类型" prop="type" v-if="renderRule.type">
        <el-radio-group v-model="menuFrom.type" @change="handleTypeUpdate">
          <el-radio :key="item.code" v-for="item in types" :label="item.code">{{
            item.remark
          }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="父级菜单">
        <select-tree
          v-model="menuFrom.parentId"
          :options="parents"
          :props="defaultProps"
        />
      </el-form-item>
      <el-form-item label="菜单名称" v-if="renderRule.name" prop="name">
        <el-input v-model="menuFrom.name"></el-input>
      </el-form-item>
      <el-form-item label="菜单能力" v-if="renderRule.ability" prop="ability">
        <el-select
          v-model="menuFrom.ability"
          size="mini"
          clearable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in abilityList"
            :key="item.code"
            :label="item.remark"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务地址" v-if="renderRule.serverUri">
        <el-select
          v-model="menuFrom.serverUri"
          default-first-option
          filterable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in apis"
            :key="item.index"
            :label="item.remark"
            :value="item.url"
          >
            <span style="float: left">{{ item.url }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.remark + "(" + item.method + ")"
            }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图标" v-if="renderRule.icon">
        <icon-list @selected="handleSelectIcon" />
      </el-form-item>
      <el-form-item label="路由地址" v-if="renderRule.clientUri" prop="clientUri">
        <el-input v-model="menuFrom.clientUri"></el-input>
      </el-form-item>
      <el-form-item label="组件路劲" v-if="renderRule.clientPath" prop="clientPath">
        <el-input v-model="menuFrom.clientPath"></el-input>
      </el-form-item>
      <el-form-item label="授权标识" v-if="renderRule.auth" prop="auth">
        <el-input v-model="menuFrom.auth"></el-input>
      </el-form-item>
      <el-form-item label="是否启用" v-if="renderRule.enable">
        <el-switch
          v-model="menuFrom.enable"
          :active-value="1"
          :inactive-value="0"
          active-text="启用"
          inactive-text="禁用"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="访问能力" v-if="renderRule.access">
        <el-switch
          v-model="menuFrom.access"
          :active-value="1"
          :inactive-value="0"
          active-color="#67C23A"
          inactive-color="#F56C6C"
          active-text="开放"
          inactive-text="鉴权"
        ></el-switch>
      </el-form-item>
      <el-form-item label="排序值" v-if="renderRule.sort">
        <el-input-number
          size="mini"
          v-model="menuFrom.sort"
          :max="99"
          :min="0"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmitForm()">确定</el-button>
        <el-button @click="handleResetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import SelectTree from "@/components/selectTree/index.vue";
import IconList from "@/components/iconList/index.vue";
export default {
  props: {
    types: {
      type: Array,
    },
    abilities: {
      type: Array,
    },
    apis: {
      type: Array,
    },
    renderRule: {
      type: Object,
    },
    perms: {
      type: Array,
    },
    parents: {
      type: Array,
    },
  },
  watch: {
    types(newVal) {
      this.typeList = newVal;
    },
    abilities(newVal) {
      this.abilityList = newVal;
    },
  },
  components: {
    SelectTree,
    IconList,
  },
  name: "",
  data() {
    return {
      isShowDialog: true,
      menuFrom: {},
      typeList: [],
      abilityList: [],
      defaultProps: {
        parent: "parentId", // 父级唯一标识
        value: "id", // 唯一标识
        label: "name", // 标签显示
        children: "children", // 子级
      },
      rules: {
        name: [{required: true, message: '请选择菜单名称', trigger: "blur" }],
        ability: [{required: true, message: '请选择菜单能力', trigger: "change" }],
        auth: [{required: true, message: '请输入授权标识', trigger: "blur" }],
        clientUri: [{required: true, message: '请输入路由地址', trigger: "blur" }],
        clientPath: [{required: true, message: '请输入组件路径', trigger: "blur" }],
      },
    };
  },
  created() {},
  mounted() {
    this.handleResetForm();
  },
  methods: {
    /**
     * 执行创建菜单
     */
    handleSubmitForm() {
      this.$emit("submit", this.menuFrom);
    },
    /**
     * 关闭对话框
     */
    hanleDialogClose() {
      this.menuFrom = {};
      this.$emit("close");
    },
    /**
     * 类型改变
     */
    handleTypeUpdate(_typeCode) {
      let typeCode = _typeCode;
      this.$emit("typeUpdate", typeCode);
      this.handleResetForm();
      this.menuFrom.type = typeCode;
    },
    /**
     * 选择icon
     */
    handleSelectIcon(val) {
      this.menuFrom.menuMeta.icon = val;
    },
    /**
     * 重置表单
     */
    handleResetForm() {
      this.menuFrom = {
        type: this.types[0].code,
        name: "",
        ability: "",
        serverUri: "",
        permId: "",
        clientUri: "",
        clientPath: "",
        auth: "",
        enable: 1,
        access: 1,
        sort: 0,
        menuMeta: {
          icon: "",
        },
      };
    },
  },
};
</script>
<style>
/* @import url(); 引入css类 */
.menu-edit-form {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.el-dialog__wrapper {
  top: -60px;
  z-index: 2009;
}
</style>